<template>
	<view class="personalGarden-view">
		<u-navbar :border-bottom="false" :background="{backgroundColor: 'transparent'}" :custom-back="close" back-icon-color="#FFFFFF">
			<view class="personalGarden-navigation-view" slot="right">
				<view class="personalGarden-navigation-left-view">
					{{dataModel.usableEnergy}}g
				</view>
				<view class="personalGarden-navigation-right-view" @click="clickPersonalGardenNavigationRightView">
					种树
				</view>
			</view>
		</u-navbar>
		<view class="personalGarden-top-view">
			<view class="personalGarden-top-tree-view">
				<view v-if="dataModel.status == 1">
					<u-image src="/static/img/loveforest/small_tree.png" width="197rpx" height="224rpx" mode="aspectFit"></u-image>
				</view>
				<view v-else-if="dataModel.status == 2">
					<u-image src="/static/img/loveforest/middle_tree.png" width="253rpx" height="382rpx" mode="aspectFit"></u-image>
				</view>
				<view v-else-if="dataModel.status == 3">
					<u-image src="/static/img/loveforest/big_tree.png" width="377rpx" height="432rpx" mode="aspectFit"></u-image>
				</view>
				<view v-else>
					
				</view>
				
				<view class="person-bubble" v-for="(item, index) in dataModel.energyBalls" :key="index" :style="positionArray[index]">
					<view v-if="item.energyType == 1">
						<view v-if="item.isSteal == 0">
							<view v-if="item.countdown == 0">
								<view class="all_bubble red_bubble" @click="clickBubble(index)">
									<view class="person-bubble-text-red">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
							<view v-else>
								<view class="count-down-view">
									<view class="all_bubble dark_red_bubble"></view>
									<u-count-down :timestamp="item.countdown" :show-days="false" :show-hours="false" color="#EA8466" separator-color="#EA8466"
									bg-color="transparent" font-size="22" separator-size="22" @end="end">
									</u-count-down>
									<view class="person-bubble-text-red">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="all_bubble dark_red_bubble">
								<view class="person-bubble-text-red">
									{{item.nowEnergy}}g
								</view>
							</view>
						</view>
						<!-- <view class="person-bubble-text-red">
							{{item.nowEnergy}}g
						</view> -->
					</view>
					<view v-else>
						<view v-if="item.isSteal == 0">
							<view v-if="item.stealNum > 0" @click="clickBubble(index)">
								<view  class="all_bubble half_green_bubble">
									<view class="person-bubble-text-red">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
							<view v-else @click="clickBubble(index)">
								<view  class="all_bubble green_bubble">
									<view class="person-bubble-text-red">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view v-if="item.stealNum > 0">
								<view class="all_bubble dark_half_green_bubble">
									<view class="person-bubble-text-red">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
							<view v-else>
								<view class="all_bubble dark_green_bubble">
									<view class="person-bubble-text-red">
										{{item.nowEnergy}}g
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="person-bubble-text-green">
							{{item.nowEnergy}}g
						</view> -->
					</view>
				</view>
			</view>
			<view class="personalGarden-top-button-view">
				<view @click="clickPersonalCarbonFootprint">
					<u-image src="/static/img/loveforest/personal_carbon_footprint.png" width="130rpx" height="100rpx" mode="scaleToFill"></u-image>
				</view>
				<view @click="clickAchievement">
					<u-image src="/static/img/loveforest/achievement.png" width="90rpx" height="100rpx" mode="scaleToFill"></u-image>
				</view>
			</view>
		</view>
		<view class="personalGarden-bottom-view">
			<view class="personalGarden-bottom-detail-view">
				<view class="personalGarden-bottom-detail-top-view">
					<view class="personalGarden-bottom-detail-top-left-view">
						今日共收取能量{{dataModel.todayEnergy}}g
					</view>
					<view class="personalGarden-bottom-detail-top-right-view" @click="clickPersonalGardenBottomDetailTopRightView">
						能量获取详情
					</view>
				</view>
				<view class="personalGarden-bottom-detail-enterprise-view">
					<view>
						企业总能量{{dataModel.companyEnergy || 0}}g
					</view>
					<view>
						排名：{{dataModel.companyRank || '暂无'}}
					</view>
				</view>
				<view class="personalGarden-bottom-detail-rank-view">
					排行榜
				</view>
				<u-tabs-swiper :current="current" activeColor="#488EF5" :list="list" @change="change" :is-scroll="false">
					
				</u-tabs-swiper>
				<swiper class="personalGarden-bottom-detail-swiper-view" :current="swiperCurrent" :disable-touch="true" duration="0">
					<swiper-item>
						<u-cell-item v-for="(item, index) in rankList1" :key="index" :style="{'padding-top': '0rpx', 'padding-bottom': '0rpx', 'padding-right': '0rpx'}" class="personalGarden-cell-view"
						:border-bottom="false" :border-top="true" :arrow="false" hover-class="none" :title="item.userName + ' - ' + item.deptName" :value="item.totalGainEnergy + 'g'"
						:title-style="{'color': '#333333', 'margin-left': '20rpx'}" :value-style="{'color': '#333333'}"
						:label="'获得了' + item.certificateNum + '个成就证书'" :label-style="{'margin-top': '0rpx'}"
						@click="clickOtherGarden(item)">
							<view slot="icon">
								<view v-if="index <= 2">
									<u-image width="40rpx" height="40rpx" mode="aspectFit"
									:src="index == 0 ? '/static/img/loveforest/number_one.png' : index == 1 ? '/static/img/loveforest/number_two.png' : '/static/img/loveforest/number_three.png'"></u-image>
								</view>
								<view v-else>
									<view v-if="index == 3">
										<view class="swiper-item-cell-view">4</view>
									</view>
									<view v-else>
										<view class="swiper-item-cell-view">5</view>
									</view>
								</view>
							</view>
							<view slot="right-icon">
								<view v-if="item.isSteal == '0'">
									<u-image src="/static/img/loveforest/enter.png" width="80rpx" height="80rpx" mode="aspectFit"></u-image>
								</view>
								<view v-else>
									<view :style="{'height': '80rpx', 'width': '80rpx'}"></view>
								</view>
							</view>
						</u-cell-item>
					</swiper-item>
					<swiper-item>
						<u-cell-item v-for="(item, index) in rankList2" :key="index" :style="{'padding-top': '0rpx', 'padding-bottom': '0rpx', 'padding-right': '0rpx'}" class="personalGarden-cell-view"
						:border-bottom="false" :border-top="true" :arrow="false" hover-class="none" :title="item.userName + ' - ' + item.deptName" :value="item.totalGainEnergy + 'g'"
						:title-style="{'color': '#333333', 'margin-left': '20rpx'}" :value-style="{'color': '#333333'}"
						:label="'获得了' + item.certificateNum + '个成就证书'" :label-style="{'margin-top': '0rpx'}"
						@click="clickOtherGarden(item)">
							<view slot="icon">
								<view v-if="index <= 2">
									<u-image width="40rpx" height="40rpx" mode="aspectFit"
									:src="index == 0 ? '/static/img/loveforest/number_one.png' : index == 1 ? '/static/img/loveforest/number_two.png' : '/static/img/loveforest/number_three.png'"></u-image>
								</view>
								<view v-else>
									<view v-if="index == 3">
										<view class="swiper-item-cell-view">4</view>
									</view>
									<view v-else>
										<view class="swiper-item-cell-view">5</view>
									</view>
								</view>
							</view>
							<view slot="right-icon">
								<view v-if="item.isSteal == '0'">
									<u-image src="/static/img/loveforest/enter.png" width="80rpx" height="80rpx" mode="aspectFit"></u-image>
								</view>
								<view v-else>
									<view :style="{'height': '80rpx', 'width': '80rpx'}"></view>
								</view>
							</view>
						</u-cell-item>
					</swiper-item>
				</swiper>
				<view class="personalGarden-bottom-detail-more-view" @click="clickPersonalGardenBottomDetailMoreView">
					查看更多
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			// this.init()
		},
		onShow() {
			this.init()
		},
		data() {
			return {
				positionArray: [
					{
						'left': '90rpx',
						'bottom': '170rpx'
					},
					{
						'top': '20rpx',
						'left': '220rpx'
					},
					{
						'top': '10rpx',
						'right': '230rpx'
					},
					{
						'top': '70rpx',
						'left': '90rpx'
					},
					{
						'top': '70rpx',
						'right': '100rpx'
					},
					{
						'left': '50rpx',
						'bottom': '300rpx'
					},
					{
						'right': '60rpx',
						'bottom': '310rpx'
					},
					{
						'right': '110rpx',
						'bottom': '180rpx'
					}
				],
				dataModel: {
					status: 0,
					usableEnergy: 0,
					todayEnergy: 0,
					energyBalls: [],
					companyEnergy: 0,
					companyRank: 0
				},
				rankList1: [],
				rankList2: [],
				current: 0,
				swiperCurrent: 0,
				list: [
					{
						name: '周排行榜'
					}, 
					{
						name: '总排行榜'
					}
				]
			}
		},
		onPullDownRefresh() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})
			this.init()
		},
		methods: {
			close () {
				uni.navigateTo({
					url:"/pages/work/apply/loveforest/homepage"
				})
			},
			init () {
				uni.stopPullDownRefresh()
				this.$u.api.getPersonalGarden().then(res => {
					this.dataModel = res
				}).catch(err => {
					console.log(err)
				})
				let params = {currentPage:1,pageSize: 10,type:5}
				this.$u.api.personalRank(params).then(res => {
					var j = 0
					if (res.list.length < 5) {
						j = res.list.length
					} else {
						j = 5
					}
					for (var i = 0; i < j; i++) {
						var k = res.list[i]
						this.rankList1.push(k)
					}
				}).catch(err => {
					console.log(err)
				})
				
				this.$u.api.personalRank({currentPage:1,pageSize: 10}).then(res => {
					var j = 0
					if (res.list.length < 5) {
						j = res.list.length
					} else {
						j = 5
					}
					for (var i = 0; i < j; i++) {
						var k = res.list[i]
						this.rankList2.push(k)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			end() {
				for (var i = 0; i < this.dataModel.energyBalls.length; i++) {
					var a = this.dataModel.energyBalls[i]
					if (a.energyType == 1) {
						a.countdown = 0
					}
				}
			},
			clickBubble(e) {
				var b = this.dataModel.energyBalls[e]
				this.$u.api.memberGarden(b.pkid).then(res => {
					var a = this.dataModel.usableEnergy
					var c = b.nowEnergy
					this.dataModel.usableEnergy = a + c
					this.positionArray.splice(e, 1)
					this.dataModel.energyBalls.splice(e, 1)
					this.init()
				}).catch(err => {
					console.log(err)
				})
			},
			change(e) {
				this.current = e
				this.swiperCurrent = e
			},
			clickPersonalGardenNavigationRightView() {
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/planting_trees/planting_trees'
				})
			},
			clickPersonalGardenBottomDetailTopRightView() {
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/obtain_detail/obtain_detail'
				})
			},
			clickPersonalGardenBottomDetailMoreView() {
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/personal_rank/personal_rank'
				})
			},
			clickPersonalCarbonFootprint() {
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/personal_carbon_footprint/personal_carbon_footprint'
				})
			},
			clickAchievement() {
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/achievement/achievement'
				})
			},
			clickOtherGarden(e) {
				if(e.userId == uni.getStorageSync("lifeData").vuex_user.userInfo.id) {
					return;
				}
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/other_garden/other_garden',
					params: e
				})
			}
		}
	}
</script>

<style lang="scss">
	.personalGarden-view {
		height: 1932rpx;
		background: url(/static/img/loveforest/homepage_background.png) no-repeat;
		background-size: cover;
		
		.personalGarden-navigation-view {
			display: flex;
			margin-right: 35rpx;
			height: 60rpx;
			
			.personalGarden-navigation-left-view {
				color: #FFFFFF;
				font-weight: bold;
				font-size: 30rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				padding-right: 30rpx;
				border-radius: 30rpx 0rpx 0rpx 30rpx;
			}
			
			.personalGarden-navigation-right-view {
				color: #FFFFFF;
				font-weight: bold;
				font-size: 30rpx;
				background-image: linear-gradient(to right, #AFE167, #57B481);
				border-top: 2rpx solid #FFFFFF;
				border-right: 2rpx solid #FFFFFF;
				border-bottom: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				padding-right: 30rpx;
				border-radius: 0rpx 30rpx 30rpx 0rpx;
			}
		}
		
		.personalGarden-top-view {
			height: calc(898rpx - constant(safe-area-inset-top) - 44px);
			height: calc(898rpx - env(safe-area-inset-top) - 44px);
			padding-left: 35rpx;
			padding-right: 35rpx;
			padding-bottom: 35rpx;
			
			.personalGarden-top-tree-view {
				height: calc(763rpx - constant(safe-area-inset-top) - 44px);
				height: calc(763rpx - env(safe-area-inset-top) - 44px);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				padding-bottom: 70rpx;
				position: relative;
				
				.person-bubble {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.count-down-view {
						display: flex;
						flex-direction: column;
						align-items: center;
					}
					
					.all_bubble {
						width: 80rpx;
						height: 80rpx;
					}
					
					.red_bubble {
						background: url(/static/img/loveforest/red_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.half_green_bubble {
						background: url(/static/img/loveforest/half_green_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.green_bubble {
						background: url(/static/img/loveforest/green_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.dark_red_bubble {
						background: url(/static/img/loveforest/dark_red_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.dark_half_green_bubble {
						background: url(/static/img/loveforest/dark_half_green_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.dark_green_bubble {
						background: url(/static/img/loveforest/dark_green_bubble.png) no-repeat;
						background-size: cover;
					}
					
					.person-bubble-text-red {
						position: absolute;
						font-weight: bold;
						color: #E5694F;
						left: 50%;
						top: 20%;
						transform: translate(-50%, 0);
					}
					
					.person-bubble-text-green {
						position: absolute;
						font-weight: bold;
						color: #589B6D;
						left: 50%;
						top: 20%;
						transform: translate(-50%, 0);
					}
				}
			}
			
			.personalGarden-top-button-view {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
			}
		}
		
		.personalGarden-bottom-view {
			padding: 0rpx 35rpx;
			height: calc(999rpx - constant(safe-area-inset-bottom));
			height: calc(999rpx - env(safe-area-inset-bottom));
			
			.personalGarden-bottom-detail-view {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				height: 100%;
				
				.personalGarden-bottom-detail-top-view {
					height: 80rpx;
					border-bottom: 2rpx solid #F5F5F5;
					display: flex;
					padding: 0rpx 35rpx;
					align-items: center;
					justify-content: space-between;
					
					.personalGarden-bottom-detail-top-left-view {
						
					}
					
					.personalGarden-bottom-detail-top-right-view {
						color: #488EF5;
					}
				}
				
				.personalGarden-bottom-detail-enterprise-view {
					height: 80rpx;
					display: flex;
					padding: 0rpx 35rpx;
					align-items: center;
					justify-content: space-between;
				}
				
				.personalGarden-bottom-detail-rank-view {
					background-color: #F5F5F5;
					height: 80rpx;
					display: flex;
					padding: 0rpx 35rpx;
					align-items: center;
					font-size: 34rpx;
					font-weight: bold;
				}
				
				.personalGarden-bottom-detail-swiper-view {
					height: calc(589rpx - constant(safe-area-inset-bottom));
					height: calc(589rpx - env(safe-area-inset-bottom));
					
					.personalGarden-cell-view {
						height: calc((589rpx - constant(safe-area-inset-bottom)) / 5);
						height: calc((589rpx - env(safe-area-inset-bottom)) / 5);
						
						.swiper-item-cell-view {
							width: 40rpx;
							height: 40rpx;
							color: #333333;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
				
				.personalGarden-bottom-detail-more-view {
					height: 90rpx;
					border-top: 2rpx solid #F5F5F5;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #488EF5;
				}
			}
		}
	}
</style>
